<template>
	<view class="zone">
		<Header :title="title"></Header>
		<view class="main">
			<view class="box">
				<view class="topimg">
					<image :src="`http://img.cpgm.cc/panda/static/fuben/${land}.png`" mode="widthFix" />
				</view>
				<view class="flexbw">
					<p>今日扫荡次数： 20 </p>
					<p>每日每次扫荡1次<text>+1水晶</text></p>
				</view>
				<view class="flexbw">
					<p>需要战力：1000</p>
					<p> <image src="http://img.cpgm.cc/panda/static/home/sj.png" mode="widthFix" /> 消耗水晶：<text>5</text></p>
				</view>

				<view class="can">
					<view class="can_title">
						可掉落物品
					</view>
					<view class="imgbox">
						<image src="http://img.cpgm.cc/panda/static/backpag/sp1.png" mode="widthFix" />
						<image src="http://img.cpgm.cc/panda/static/backpag/sp1.png" mode="widthFix" />
						<image src="http://img.cpgm.cc/panda/static/backpag/sp1.png" mode="widthFix" />
						<image src="http://img.cpgm.cc/panda/static/backpag/sp1.png" mode="widthFix" />
						<image src="http://img.cpgm.cc/panda/static/backpag/sp1.png" mode="widthFix" />
						<image src="http://img.cpgm.cc/panda/static/backpag/sp1.png" mode="widthFix" />
						<image src="http://img.cpgm.cc/panda/static/backpag/sp1.png" mode="widthFix" />
					</view>
				</view>

				<view class="btn button" @click="$p.navto('/pages/land/landdetail')">扫荡地图  </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'',
				land:'',
			};
		},
		onLoad(option){
			this.title = option.name
			this.land = option.id
		},
	}
</script>

<style lang="less">
.zone {
	background: url('http://img.cpgm.cc/panda/static/home/bg.png');
	min-height: 100vh;
	background-size: 101% 101%;
	background-position: center;
}

.main {
	padding: 10px;
}

.box {
	background: #FFFFFF;
	border-radius: 14px;
	border: 1px solid #FEE1C3;
	padding: 10px;
}

.topimg {
	width: 100%;

	image {
		width: 100%;
	}
}

.flexbw {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 5px;

	text {
		color: #239D4C;
	}

	p {
		display: flex;
		align-items: center;

		image {
			width: 20px;
		}
	}
}


.can {
	margin-top: 20px;
	color: #131314;
	font-size: 14px;
	font-weight: 600;
}

.imgbox {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 10px;

	image {
		width: 18%;
		background: linear-gradient(180deg, #088CF5 0%, #82BFE5 100%);
		box-shadow: inset 0px 1px 1px 0px rgba(240,211,146,1), inset 0px -1px 0px 0px rgba(242,212,149,1);
		border-radius: 4px;
		margin: 0 1%;
		margin-bottom: 10px;
	}
}
.btn {
	margin: 0 auto;
	margin-top: 20px;
	width: 90%;
	height: 50px;
	background: linear-gradient(90deg, #E5BB94 0%, #EEDDCF 100%);
	border-radius: 7px;
	font-size: 15px;
	font-weight: 600;
}






</style>
